<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			table{
				
				height:300px
			}
			.con{
				position: absolute;
				left: 50%;
				top:50%;
				margin-left: -400px;
				margin-top: -150px;
			}
			.photo{
				width:300px;
				height: 300px;
				background-image: url(../src/tu.jpg);/* 具有特性,可以用background-size */
				background-size:contain ;
				background-position: center;/* 可以加应该noreapt */
				border-radius: 50%;/* 圆角 */
				background-repeat: no-repeat;
			}
			td{
				text-align: center;
				color:red;
				
			}
			td:hover{
				background-color:skyblue ;
				border-radius: 50%;/* 圆角 */
			}
		</style>
		<script type="text/javascript">
			function funClick(){
				location.href="https://image.baidu.com/search/index?tn=baiduimage&word="
				+event.target.innerHTML
			}
			let index=1;
			let t1;
			let obj;
			function funOver(){
				clearInterval(t1)
				obj=event.target//初始化obj
				let url=`../src/images/${obj.innerHTML}/${index}.jpg`
				document.querySelector(".photo").
				setAttribute("style",`background-image: url(${url});`)//改变style属性
				
			}
			function funOut(){
				t1=setInterval(display,1000)//周期性执行display
			}
			
			function display(){
				index++;
				if(index>7){
					index=1;
				}
				let url=`../src/images/${obj.innerHTML}/${index}.jpg`
				document.querySelector(".photo").
				setAttribute("style",`background-image: url(${url})`)//改变style属性
			}
			// let curOp=1
			// let change = -0.1 
			// function changeOpacity(){
			// 	if(curOp>1){
			// 		change= -0.1
			// 	}else if(curOp<0.1){
			// 		change=0.1
			// 	}
			// 	curOp=curOp+change
			// 	document.querySelector(".photo").setAttribute("style",`opacity:${curOp}`)//改变style属性.透明度
			// }
			
		</script>
	</head>
	<body onload="changeOpacity()">
		<div class="con">
			<table>
				<tr>
					<td rowspan="5">
						<div class="photo"></div>
					</td>
					<td colspan="2"><input type="text" id="key" />
					<button id="search">搜索</button>
					</td>
				</tr>
				<tr>
					<td class="note">中国国宝</td>
					<td class="note">兵马俑</td>
				</tr>
				<tr>
					<td class="note">川菜</td>
					<td class="note">粤菜</td>
				</tr>
				<tr>
					<td class="note">新疆风情</td>
					<td class="note">客家土楼</td>
				</tr>
				<tr>
					<td class="note">民族乐器</td>
					<td class="note">青铜重器</td>
				</tr>
			</table>
		</div>
		<script type="text/javascript">
			let notes=document.querySelectorAll(".note")
			for (var i = 0; i < notes.length; i++) {
				notes[i].addEventListener("click",funClick)
				notes[i].addEventListener("mouseover",funOver)
				notes[i].addEventListener("mouseout",funOut)
			}
			document.getElementById("search").onclick=function(){//为其单击时间赋值
			let key=document.getElementById("key").value
			if(key!=""){
				location.href="https://image.baidu.com/search/index?tn=baiduimage&word="+key
			}
			}
			setInterval(changeOpacity,500)
		</script>
	</body>
</html>
